<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3,
        p {
            display: none;
        }

        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }

        .change1 {
            width: 300px;
            height: 300px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #fff;
        }
    </style>
</head>

<body>

    <div class="box">
        <h3>欢迎XX登录</h3>
        <span class="loginOut">退出登录</span>
        <span class="delete">注销账号</span>
    </div>
    <p>
        <a href="./10reg.html">注册</a>
        <a href="./11login.html">登录</a>
    </p>


    <table border="1">
        <thead>
            <tr>
                <td>用户名</td>
                <td>密码</td>
                <td>手机号</td>
                <td>邮箱</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>aa</td>
                <td>123</td>
                <td>aa</td>
                <td>123</td>
                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr> -->
        </tbody>
    </table>





    <div class="cover">
        <div class="change1">
            <h4>修改信息</h4>
            手机号<input class="phone" type="text" value="" disabled> <br>
            用户名<input class="username" type="text" value=""> <br>
            密码<input class="password" type="text" value=""> <br>
            邮箱<input class="email" type="text" value=""> <br>
            <button class="btn2">确定</button>
        </div>
    </div>





    <script>




        const oP = document.querySelector('p');
        const oH = document.querySelector('h3');
        const oOut = document.querySelector('.loginOut');
        const oDel = document.querySelector('.delete');
        const oT = document.querySelector('tbody');
        const oCover = document.querySelector('.cover');
        const oUsername = document.querySelector('.username');
        const oPassword = document.querySelector('.password');
        const oEmail = document.querySelector('.email');
        const oPhone = document.querySelector('.phone');
        const oBtn2 = document.querySelector('.btn2');


        // 为了修改的时候，读取到手机号   ??????????????????????????????????????????
        let _phone;


        render();

        // 渲染表格   --   读取localStorage中的数据
        function render() {
            let html = '';
            for (let i = 0; i < localStorage.length; i++) {
                let phone = localStorage.key(i);
                let user = localStorage.getItem(phone);
                // console.log(user);  // 字符串


                try {
                    user = JSON.parse(user);
                } catch (err) {
                    // console.log(err);
                }

                // console.log(user);
                if (user instanceof Object) {
                    console.log(user);

                    // 把手机号加进去 --- 为了修改的时候绑定用户信息
                    user.phone = phone;
                    console.log(user);

                    // const username = user.username ;
                    // const password = user.password ;
                    // const email = user.email ;

                    // 解构  --- 简写
                    const { username, password, email } = user;

                    html += `
                    <tr>
                        <td>${username}</td>
                        <td>${password}</td>
                        <td>${phone.replace('YYDS_', '')}</td>
                        <td>${email}</td>
                        <td>
                            <button class="del" data-phone="${phone}">删除</button>
                            <button class="change" data-user='${JSON.stringify(user)}'>修改</button>
                        </td>
                    </tr>
                    `
                }
            }



            // // 过滤数据的数据   包含了YYDS_  includes
            // if (phone.includes('YYDS_')) {
            //     user = JSON.parse(user);

            //     // 把手机号加进去 --- 为了修改的时候绑定用户信息
            //     user.phone = phone;
            //     console.log(user);

            //     // const username = user.username ;
            //     // const password = user.password ;
            //     // const email = user.email ;

            //     // 解构  --- 简写
            //     const { username, password, email } = user;

            //     html += `
            // <tr>
            //     <td>${username}</td>
            //     <td>${password}</td>
            //     <td>${phone.replace('YYDS_', '')}</td>
            //     <td>${email}</td>
            //     <td>
            //         <button class="del" data-phone="${phone}">删除</button>
            //         <button class="change" data-user='${JSON.stringify(user)}'>修改</button>
            //     </td>
            // </tr>
            // `
            // }

            oT.innerHTML = html;
        }






        oT.onclick = function (e) {
            e = e || event;
            const target = e.target || e.srcElement;
            // 删除
            if (target.className == 'del') {
                // 删除数据
                let phone = target.getAttribute('data-phone');
                console.log(phone);
                localStorage.removeItem(phone);
                // 删除dom
                target.parentElement.parentElement.remove();
                return;
            }


            // 修改
            if (target.className === 'change') {
                oCover.style.display = 'block';

                // 弹窗中显示原始数据
                let user = target.getAttribute('data-user');
                console.log(user);
                user = JSON.parse(user);
                console.log(user);

                const { username, password, phone, email } = user;


                console.log(oPhone);
                oPhone.placeholder = phone;
                oPassword.placeholder = password;
                oEmail.placeholder = email;
                oUsername.placeholder = username;

                _phone = phone;

            }
        }




        oBtn2.onclick = function () {
            const username = oUsername.value;
            // const phone1 = oPhone.value;
            const email = oEmail.value;
            const password = oPassword.value;
            oCover.style.display = 'none';
            console.log(_phone);

            // 判断是否为空   去读取placeholder 的内容  。。。。

            const user = { username, password, email };
            localStorage.setItem(_phone, JSON.stringify(user));
            render();
        }


    </script>

</body>

</html>